<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-table单元格合并</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
</head>
<body>

<table id="data-table"></table>

<script type="text/javascript">

//函数说明：合并指定表格（表格id为_t_id）指定列（列数为_t_colnum）的相同文本的相邻单元格
//参数说明：_t_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
//参数说明：_t_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。
function _table_rowspan(_t_id, _t_colnum) {
    //声明合并数组
    var _t_merge_arr = [];
    //声明起始行、合并行数
    var _t_start_index = 0;
    var _t_merge_number = 0;
    //声明临时比较变量
    var _t_compare_value = '';
    //获取数据行数
    var _t_rows = null;
    if($(_t_id).length == 1){
        _t_rows = $(_t_id + " tr td:nth-child(" + _t_colnum + ")");
    } else if($(_t_id).length > 1){
        _t_rows = $(_t_id).eq($(_t_id).length - 1).find("tr td:nth-child(" + _t_colnum + ")");
    } else {
        return;
    }
    _t_rows.each(function(i) {
        var _t_temp_value = $(this).text();
        if (i==0) {
            //首行不比较
            _t_compare_value = _t_temp_value;
            _t_merge_number ++;
        } else {
            //对比本行数据和上行数据是否一样
            if (_t_compare_value == _t_temp_value) {
                _t_merge_number ++;
                if(_t_merge_number > 1){
                    //声明合并行大于1的对象
                    var _t_merge_object = {index: _t_start_index,rowspan: _t_merge_number};
                    //取出合并数组最后一个对象
                    var _t_merge_arr_last_object = _t_merge_arr[_t_merge_arr.length - 1];
                    if (_t_merge_arr.length > 0) {
                        //根据起始下标看是否是同一合并
                        if (_t_merge_arr_last_object.index == _t_merge_object.index) {
                            _t_merge_arr[_t_merge_arr.length - 1] = _t_merge_object;
                        } else {
                            _t_merge_arr.push(_t_merge_object);
                        }
                    } else {
                        _t_merge_arr.push(_t_merge_object);
                    }
                }
            } else {
                _t_merge_number = 1;
                _t_start_index = i;
                _t_compare_value = _t_temp_value;
            }
        }
    });
    for (var i = 0; i < _t_merge_arr.length; i++) {
        var item = _t_merge_arr[i];
        var rowsnum = item.rowspan;
        for ( var j = 0; j < rowsnum-1; j++) {
            $(_t_rows[item.index+j+1]).css('display','none');
        }
        $(_t_rows[item.index]).attr("rowSpan", item.rowspan);
    }
}

$("#data-table").bootstrapTable({
    clickToSelect: true,
    singleSelect: true,
    columns: [
        {title: "序号" , align: "center", sortable: false ,
            formatter: function(value , row , rowIndex){
                window.rowProps = (window.rowProps || {});
                window.rowProps[row.country + "_" + row.city] = true;
                return Object.getOwnPropertyNames(window.rowProps).length;
            }
        },
        {field: "city" , title: "城市" , align: "center", sortable: false ,
            formatter: function (value , row , rowIndex) {
                return "<label style='display:none;'>" + row.country + "</label>" + value;
            }
        },
        {field: "name" , title: "姓名" , align: "center", sortable: true},
        {field: "remark" , title: "说明" , sortable: true, clickToSelect: false}
    ],
    data: [
        {"country" : "中国" , "city" : "襄阳" , "name" : "庞统" , "remark" : "中国的襄阳"},
        {"country" : "中国" , "city" : "襄阳" , "name" : "徐庶" , "remark" : "中国的襄阳"},
        {"country" : "中国" , "city" : "襄阳" , "name" : "马谡" , "remark" : "中国的襄阳"},
        {"country" : "韩国" , "city" : "襄阳" , "name" : "不知道" , "remark" : "韩国的襄阳"}
    ],
    onPostBody: function() {
        window.rowProps = undefined;
        _table_rowspan("#data-table" , 1);
        _table_rowspan("#data-table" , 2);
        return true;
    },
    responseHandler: function (result) {
        var options = $("#data-table").bootstrapTable("getOptions");
        var pageNumber = options.pageNumber;
        var pageSize = options.pageSize;
        var rows = result.rows;
        for(var i=0 ; i < rows.length ; i++){
            var item = rows[i];
            item.id = (pageNumber - 1) * pageSize + (i + 1);
            item.name = item.name + item.id;
        }
        return result;
    }
});

</script>
</body>
</html>